<template>
  <div :class="['Swiper3d', { mobile: $isMobile}]">
    <div id="certify">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="item in 5"
          >
            <img src="@/assets/img/2023-07-21_160823.png" />
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <!-- <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div> -->
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const { $isMobile } = getCurrentInstance().appContext.config.globalProperties

const router = useRouter()
const route = useRoute()

onMounted(() => {
  let certifySwiper = new Swiper('#certify .swiper-container', {
    watchSlidesProgress: true,
    slidesPerView: 'auto',
    centeredSlides: true,
    loop: true,
    autoplay: true,
    loopedSlides: 5,
    autoplay: true,
    navigation: {
      nextEl: '#certify .swiper-button-next',
      prevEl: '#certify .swiper-button-prev'
    },
    pagination: {
      el: '#certify .swiper-pagination',
      clickable: true
    },
    on: {
      progress: function (progress) {
        for (let i = 0; i < this.slides.length; i++) {
          let slide = this.slides.eq(i)
          let slideProgress = this.slides[i].progress
          let modify = 1
          if (Math.abs(slideProgress) > 1) {
            modify = (Math.abs(slideProgress) - 1) * 0.3 + 1
          }
          let translate = slideProgress * modify * 260 + 'px'
          let scale = 1 - Math.abs(slideProgress) / 5
          let zIndex = 999 - Math.abs(Math.round(10 * slideProgress))
          slide.transform('translateX(' + translate + ') scale(' + scale + ')')
          slide.css('zIndex', zIndex)
          slide.css('opacity', 1)
          if (Math.abs(slideProgress) > 3) {
            slide.css('opacity', 0)
          }
        }
      },
      setTransition: function (transition) {
        for (let i = 0; i < this.slides.length; i++) {
          let slide = this.slides.eq(i)
          slide.transition(transition)
        }
      }
    }
  })
})
</script>

<style scoped lang="scss">
#certify {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;

  .swiper-container {
    padding-bottom: 30px;
  }

  .swiper-slide {
    width: 498px;
    height: 298px;
    background: #fff;

    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .swiper-pagination {
    width: 100%;
    bottom: 0px;
  }

  .swiper-pagination-bullets {
    :deep(.swiper-pagination-bullet) {
      margin: 0 5px;
      background-color: #808281;
      width: 20px;
      height: 4px;
      opacity: 1;
      border-radius: 0;
    }
    :deep(.swiper-pagination-bullet-active) {
      background-color: #ca2a02;
    }
  }
}

.mobile{
  #certify {
    .swiper-slide {
      width: 328px;
      height: 128px;
    }
  }
}

/* #certify .swiper-button-prev {
  left: -30px;
  width: 45px;
  height: 45px;
  background: url(../images/wm_button_icon.png) no-repeat;
  background-position: 0 0;
  background-size: 100%;
}

#certify .swiper-button-prev:hover {
  background-position: 0 -46px;
  background-size: 100%;
}

#certify .swiper-button-next {
  right: -30px;
  width: 45px;
  height: 45px;
  background: url(../images/wm_button_icon.png) no-repeat;
  background-position: 0 -93px;
  background-size: 100%;
}

#certify .swiper-button-next:hover {
  background-position: 0 -139px;
  background-size: 100%;
} */
</style>
